import React, { Component } from 'react';
import Order  from './Order';
import User from './User';
// 使用as 是因为两个模块中的对象都叫actionCreator，所以区分一下
import {actionCreator as orderAction, getList} from '../store/order'
import {actionCreator as userAction, getInfo} from '../store/user'
// 导入connect方法，将UI型组件转换成容器型组件
import {connect} from 'react-redux'
// bindActionCreators:一次性全部导入action
import {bindActionCreators}  from 'redux'

class Big1 extends Component {
  render() {
    // console.log(this.props);
    let {order, user, delOrder, addOrder} = this.props
    return (
      <div>
        <p>容器型组件和UI型组件:容器型组件中包含数据和逻辑，比较复杂。UI型组件不包括数据和逻辑，只是页面的展示</p>
        {/* <Order
          list={order.list}
          delOrder={delOrder}
          addOrder={addOrder}
        ></Order> */}
        <Order
          list={order.list}
          orderAction={this.props.orderAction}
        >
        </Order>
        <User
          name={user.name}
          age={user.age}
          changeName={this.props.changeName}
        ></User>
      </div>
    );
  }
}

// map store 的state到当前组件的props
// 将store中的数据映射到当前组件的props中，目的是获取数据
const mapStateToProps = (state) =>{
  return {
    // user: state.user,
    // order: state.order
    user: getInfo(state),
    order: getList(state)
  }
}

// 将store中的dispatch映射到当前组件的props中，目的是修改数据
const mapDispatchToProps = (dispatch, ownProps) =>{
  return {
    changeName: (name)=>dispatch(userAction.changeName(name)),
    // delOrder: (index)=>dispatch(orderAction.delOrder(index)),
    // addOrder: (info)=>dispatch(orderAction.addOrder(info)),
    orderAction: bindActionCreators(orderAction, dispatch)
    // 一行代码导入整个模块中的所有函数
  }
}

// connect将UI型组件转化为容器型组件
// Big1是UI型组件，Big是转换后的容器型组件
const Big = connect(mapStateToProps, mapDispatchToProps)(Big1)
export default Big;
